searchDisplay: Improve the placement and style of the "No results" text

During user testing, it was shown that several people did not notice the
miniscule text label. Make it large and centered.

https://bugzilla.gnome.org/show_bug.cgi?id=683135

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c27dadc19751f93585945a54fd7743edeebd2072..80e7da2e84f12a7910752dc9c51da541b89b0944 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -695,7 +695,6 @@ StButton.popup-menu-item:insensitive {
     padding-left: 20px;
 }
 
-.search-statustext,
 .search-section-header {
     padding: 4px 12px;
     spacing: 4px;
@@ -703,6 +702,12 @@ StButton.popup-menu-item:insensitive {
     font-size: .8em;
 }
 
+.search-statustext {
+    color: #efefef;
+    font-size: 2em;
+    font-weight: bold;
+}
+
 .search-section-results {
     padding: 6px;
 }

diff --git a/js/ui/searchDisplay.js b/js/ui/searchDisplay.js
index f6a383265ec33f24f78c490f23e0634a3e046603..28e0255f8e0582542db00299d8e7513858f10c4f 100644 (file)
--- a/js/ui/searchDisplay.js
+++ b/js/ui/searchDisplay.js
@@ -190,7 +190,7 @@ const SearchResults = new Lang.Class({
         scrollView.add_actor(this._content);
 
         this.actor.add(scrollView, { x_fill: true,
-                                     y_fill: false,
+                                     y_fill: true,
                                      expand: true,
                                      x_align: St.Align.START,
                                      y_align: St.Align.START });
@@ -205,7 +205,10 @@ const SearchResults = new Lang.Class({
             }));
 
         this._statusText = new St.Label({ style_class: 'search-statustext' });
-        this._content.add(this._statusText);
+        this._statusBin = new St.Bin({ x_align: St.Align.MIDDLE,
+                                       y_align: St.Align.MIDDLE });
+        this._content.add(this._statusBin, { expand: true });
+        this._statusBin.add_actor(this._statusText);
         this._providers = this._searchSystem.getProviders();
         this._providerMeta = [];
         for (let i = 0; i < this._providers.length; i++) {
@@ -265,14 +268,14 @@ const SearchResults = new Lang.Class({
 
     reset: function() {
         this._searchSystem.reset();
-        this._statusText.hide();
+        this._statusBin.hide();
         this._clearDisplay();
     },
 
     startingSearch: function() {
         this.reset();
         this._statusText.set_text(_("Searching..."));
-        this._statusText.show();
+        this._statusBin.show();
     },
 
     doSearch: function (searchString) {
@@ -322,10 +325,10 @@ const SearchResults = new Lang.Class({
             }
 
         if (!haveResults) {
-            this._statusText.set_text(_("No matching results."));
-            this._statusText.show();
+            this._statusText.set_text(_("No results."));
+            this._statusBin.show();
         } else {
-            this._statusText.hide();
+            this._statusBin.hide();
         }
     },